<template>
	<button
    class="def-button"
    :class="[disabled ? 'disabled' : '', gray ? 'gray' : '']"
    type="default"
    :disabled="disabled"
    :style="{
        width: btnWidth,
        height: height + 'rpx',
        lineHeight: height + 'rpx',
        borderRadius: borderRadius + 'rpx',
        fontSize: fontSize + 'rpx'
      }">
    <slot>自定义按钮</slot>
  </button>
</template>

<script lang="ts" setup>
	import { ref, computed } from "vue"
  import { useThemeStore } from "@/store/theme"
  import { storeToRefs } from 'pinia'

  // 参数定义
  const props = defineProps({
    width: { // 宽
      type: [Number, String],
      default: 515
    },
    height: { // 高
      type: [Number, String],
      default: 70
    },
    borderRadius: { // 圆角
      type: [Number, String],
      default: 35
    },
    fontSize:{ // 字体大小
      type: [Number, String],
      default: 36
    },
    disabled: { // 是否禁用
      type: Boolean,
      default: false
    },
    gray: { // 背景色
      type: Boolean,
      default: false
    },
    sub: { // 是否为sub背景色
      type: Boolean,
      default: false
    }
  })

  const themeStore = useThemeStore()
  const { mainGradientColor, subGradientColor } = storeToRefs(themeStore)

  const btnWidth = ref(props.width == 750 ? '100%' : props.width + 'rpx')
  const bgColor = ref(props.sub ? subGradientColor : mainGradientColor)

</script>

<style lang="scss" scoped>
	.def-button{
    @include flexRowCenter;
    color: #FFF;
    border: none;
    outline: none;
    background: v-bind(bgColor);
    margin: 0;
    padding: 0;
    &.gray {
      background: #EFEFEF;
      font-size: 26rpx;
      color: #333333;
    }
    &.disabled {
      color: rgba(0, 0, 0, 0.3);
      background: #f7f7f7;
    }
    &::after {
      border: none !important;
    }
  }
</style>
